<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type='text/javascript' src='./knockout.js'></script>

</head>
<body>
<div id="applyBinding">
    applyBinding
</div>

<div id="addstyle">
    addstyle
</div>

<div data-bind="foreach: numbers" class="content">
    <div>
        <img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="baiduImg"/>
    </div>
</div>
<script type="text/javascript">
    document.querySelector("#applyBinding").addEventListener('click',function(){
        var numbers = [];
        for(var i = 0;i<1000;i++){
            numbers.push(i);
        }

        ko.applyBindings({
            numbers:numbers
        });
    },false);
    document.querySelector("#addstyle").addEventListener('click',function(){
        var style = document.createElement('style');
        var templete = document.querySelector("#styleTemplete");
        style.innerHTML = templete.innerHTML;
         document.head.appendChild(style);
    },false);

</script>

<script type="text/x-handlebars-template" id="styleTemplete">
    .content{
        background: lightcyan;
        border: 1px solid red;
    }
</script>

</body>
</html>